 <template>
  <!-- 详细内容页面 -->
  <div id="container">
    <el-collapse v-model="activeNames" v-loading="loading">
      <el-collapse-item title="基本信息" name="1">
        <warehouse-in-detail
          ref="detail"
          :list="warehouseInDetail"
        ></warehouse-in-detail>
        <div class="button">
          <el-button
            type="primary"
            v-if="$route.query.mode == 'edit'"
            @click="confirmWarehouseIn"
            :loading="confirmLoading"
            >确认入库</el-button
          >
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>
<script>

import warehouseInDetail from './components/warehouseInDetail.vue'
export default {
  name: 'detail',
  data () {
    return {
      activeNames: ['1'],
      loading: false,
      confirmLoading: false,
      warehouseInDetail: []
    }
  },
  components: {
    warehouseInDetail
  },
  mounted () {
    this.getDetail()
  },
  methods: {
    async getDetail () {
      this.loading = true
      // inoutType 出入库类型：1出库2入库
      let param = { limit: 1000, page: 1, id: this.$route.query.id, inoutType: 2 }
      let { data } = await this.$API.inventory.getInoutList.get(param)
      this.warehouseInDetail = data
      this.warehouseInDetail.map(item => {
        item.inoutProductList.map(i_item => {
          i_item.actualNum = i_item.inoutNum
        })
      })
      this.loading = false

    },
    //确认入库
    confirmWarehouseIn () {
      let data = this.$refs.detail.form
      this.$confirm('是否要确认入库', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let param = {
          id: this.$route.query.id,
          inoutProductList: data.inoutProductList
        }
        this.confirmLoading = true
        this.$API.inventory.updateInout.post(param).then(async () => {
          let res = await this.$API.inventory.confirmInout.post({ id: this.$route.query.id })
          this.confirmLoading = false
          if (res.code == 200) {
            this.$message.success("操作成功")
            this.$router.push({
              path: '/goods/warehouseIn'
            })
          }
        })

      }).catch(() => {

      })
    }
  }
}
</script>
<style lang='scss' scoped>
#container {
  margin: 10px;
  :deep(.el-collapse-item__header) {
    padding-left: 20px;
    font-size: 16px;
  }
  :deep(.el-collapse-item__content) {
    padding: 0 20px 20px 20px;
  }
  :deep(.el-form-item) {
    margin-bottom: 5px;
  }
  :deep(.el-form-item__label) {
    color: #999;
  }
  .button {
    margin-top: 30px;
  }
}
</style>